<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
    :show-ok-btn="false"
  >
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'ant-design:select-outlined',
              onClick: handleEdit.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { columns, searchFormSchema } from './selectSearchDataModal.data';

  import { getVisualListQuery } from '/@/api/flowManage/flowManage';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'SelectSearchDataModal',
    components: {
      BasicModal,
      BasicTable,
      TableAction,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const getTitle = '选择查询';
      const { currentRoute } = useRouter();

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false, width: '60%' });
        try {
          console.log('data', data);
        } catch (err) {
          console.log(err);
        }
      });

      const [registerTable, { reload }] = useTable({
        title: '',
        api: getVisualListQuery,
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        searchInfo: {
          type: 'all',
          op: 'search',
        }, //额外的参数
        useSearchForm: true,
        showTableSetting: false,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        canResize: false,
        beforeFetch: (info) => {
          let newInfo = info;
          // if (currentRoute.value?.query?.formCode) {
          //   newInfo.formCode = currentRoute.value.query.formCode;
          //   newInfo.type = '';
          // }
          return newInfo;
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true });

          closeModal();
          emit('success');
        } catch (err) {
          console.log(err);
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      //选择
      const handleEdit = (record) => {
        emit('success', record);
        closeModal();
      };
      return {
        registerModal,
        getTitle,
        handleSubmit,
        registerTable,
        handleEdit,
      };
    },
  });
</script>
